<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题型列表</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
    <div style="height: 50px"></div>
    <el-button type="danger" @click="delscores">批量删除</el-button>
    <!--数据表格-->
    <el-table :data="scores" border @select-all="selectAll" @select="selectRow">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="考生姓名" prop="userName"></el-table-column>
        <el-table-column label="试卷名称" prop="ename"></el-table-column>
        <el-table-column label="分数" prop="score"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" size="small" @click="editscore(scope)">编辑</el-button>
                <el-button type="danger" size="small" @click="delscore(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination :total="total" background
                   :page-size="5"
                   :page-sizes="[5,10,20]"
                   layout="total,prev,pager,next,sizes,jumper"
                   @size-change="changeSize"
                   @current-change="currentPage"></el-pagination>

    <!--编辑对话框-->
    <el-dialog v-model="editFlag" title="编辑分数" width="30%">
        <el-form :label-width="100" :rules="rules" :model="updatascore" ref="scoreForm">

            <el-form-item label="考生：" prop="userName">
                <el-input style="width: 300px" placeholder="请输入考生姓名" v-model="updatascore.userName">
                    <template #prefix>
                        <el-icon><User/></el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="试卷名称：" prop="ename">
                <el-input style="width: 300px" placeholder="请输入题型名称" v-model="updatascore.ename">
                    <template #prefix>
                        <el-icon><User/></el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="分数：" prop="score">
                <el-input style="width: 300px" placeholder="请输入分数" v-model="updatascore.score">
                    <template #prefix>
                        <el-icon><User/></el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="" >
                <el-button type="primary" @click="edit">修改</el-button>
                <el-button type="info" native-type="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<script>
    var option={
        data(){
            return {
                page:1, //当前也
                size:5, //每页的大小
                total:0,//总记录数
                scores:[],
                selectRows:[], //存放用户选择的行
                editFlag:false,

                // exam:{
                //     tid:undefined,
                //     typeName:undefined
                // }
            }
        },
        methods:{
            getTableData(){
                axios.get("score/list",{params:{page:this.page,size:this.size}}).then(resp=>{
                    this.scores=resp.data.list;
                    this.total=resp.data.total;
                });
            },
            currentPage(page){
                this.page=page;
                this.getTableData();
            },
            changeSize(size){
                this.size=size;
                this.getTableData();
            },
            delscore(scope){
                let _this=this;
                this.$confirm("您确定要删除该学生分数记录吗？").then(()=>{
                    axios.post("score/del?id="+scope.row.id).then(resp=>{
                        alert(resp.data.msg);
                        //更新数据
                        this.getTableData();
                    });
                });
            },
            selectAll(all){
                this.selectRows=all;
            },
            selectRow(row){
                this.selectRows=row;
            },
            delscores(){
                let _this=this;
                if(this.selectRows.length>0){
                    this.$confirm("确定要删除吗？").then(()=>{
                        //拼接ids=1,2,3
                        let ids=_this.selectRows[0].id;
                        for(let i=1;i<_this.selectRows.length;i++){
                            ids+=","+_this.selectRows[i].id;
                        }
                        axios.post("score/dels?ids="+ids).then(resp=>{
                            if(resp.data.code==200){
                                alert("删除成功！");
                                _this.getTableData();
                            }else{
                                alert("删除失败！");
                            }
                        });
                    });
                }else{
                    alert("请先选择要删除的行！");
                }
            },
            editscore(scope){
                this.updatascore=scope.row;
                this.editFlag=true;
            },
            edit(){
                let _this=this;
                axios.post("score/edit",this.updatascore).then(resp=>{
                    if(resp.data.code==200){
                        alert("修改成功");
                        _this.editFlag=false;
                    }else{
                        alert("修改失败");
                    }
                });
            }
        },
        created(){
            this.getTableData();
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>